<template>
      <div class="app-container">
           <el-card class="Empl_register_edit" v-if="editFlag">
              <div slot="header" class="clearfix">
                  <span>员工基本信息</span>
              </div>
              <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                            <el-col :span="12" >
                                <el-form-item label="员工号" prop="employeeId" filterable>
                                    <el-select v-model="form.employeeId" placeholder="请选择员工号" filterable>
                                        <el-option
                                           v-for="dict in employeeIdOptions"
                                           :key="dict.partyId"
                                           :label="dict.firstName"
                                           :value="dict.partyId"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        <el-col :span="12" >
                            <el-form-item label="姓名" prop="firstName">
                                <el-input v-model="form.firstName" placeholder="请输入姓名" />
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                            <el-col :span="12" >
                                <el-form-item label="性别" prop="gender">
                                    <el-select v-model="form.gender" placeholder="请选择性别">
                                        <el-option
                                           v-for="dict in genderOptions"
                                           :key="dict.enumCode"
                                           :label="dict.description"
                                           :value="dict.enumCode"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" >
                                <el-form-item label="部门" prop="deptId" filterable>
                                    <el-select v-model="form.deptId" placeholder="请选择部门" filterable>
                                        <el-option
                                           v-for="dict in deptIdOptions"
                                           :key="dict.deptId"
                                           :label="dict.deptName"
                                           :value="dict.deptId"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                    </el-row >
                    <el-row>
                            <el-col :span="12" >
                                <el-form-item label="职位" prop="positionId" filterable>
                                    <el-select v-model="form.positionId" placeholder="请选择职位" filterable>
                                        <el-option
                                           v-for="dict in positionIdOptions"
                                           :key="dict.postId"
                                           :label="dict.postName"
                                           :value="dict.postId"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        <el-col :span="12" >
                            <el-form-item label="手机号" prop="mobilePhone">
                                <el-input v-model="form.mobilePhone" placeholder="请输入手机号" />
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="身份证" prop="cardId">
                                <el-input v-model="form.cardId" placeholder="请输入身份证" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="公司邮箱" prop="mail">
                                <el-input v-model="form.mail" placeholder="请输入公司邮箱" />
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                            <el-col :span="12" >
                                <!-- <el-form-item label="入职日期" prop="entryDate">
                                    <el-date-picker clearable
                                       v-model="form.entryDate"
                                       type="date"
                                       value-format="yyyy-MM-dd"
                                       placeholder="请选择入职日期">
                                    </el-date-picker>
                                </el-form-item> -->
                            </el-col>
                        <el-col :span="12" >
                            <el-form-item label="上级主管" prop="supervisor">
                                <el-input v-model="form.supervisor" placeholder="请输入上级主管" />
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="头像">
                                <image-upload v-model="form.imageData"/>
                            </el-form-item>
                        </el-col>
                            <el-col :span="12" >
                                <el-form-item label="民族" prop="nation">
                                    <el-select v-model="form.nation" placeholder="请选择民族">
                                        <el-option
                                           v-for="dict in nationOptions"
                                           :key="dict.enumCode"
                                           :label="dict.description"
                                           :value="dict.enumCode"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                    </el-row >
                    <el-row>
                            <el-col :span="12" >
                                <el-form-item label="出生日期" prop="birthDate">
                                    <el-date-picker clearable
                                       v-model="form.birthDate"
                                       type="date"
                                       value-format="yyyy-MM-dd"
                                       placeholder="请选择出生日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        <el-col :span="12" >
                            <el-form-item label="居住地址" prop="residentialAddress">
                                <el-input v-model="form.residentialAddress" placeholder="请输入居住地址" />
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                            <el-col :span="12" >
                                <el-form-item label="学历" prop="education">
                                    <el-select v-model="form.education" placeholder="请选择学历">
                                        <el-option
                                           v-for="dict in educationOptions"
                                           :key="dict.enumCode"
                                           :label="dict.description"
                                           :value="dict.enumCode"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" >
                                <el-form-item label="政治面貌" prop="politicStatus">
                                    <el-select v-model="form.politicStatus" placeholder="请选择政治面貌">
                                        <el-option
                                           v-for="dict in politicStatusOptions"
                                           :key="dict.enumCode"
                                           :label="dict.description"
                                           :value="dict.enumCode"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="个人邮箱" prop="personalEmail">
                                <el-input v-model="form.personalEmail" placeholder="请输入个人邮箱" />
                            </el-form-item>
                        </el-col>
                            <el-col :span="12" >
                                <el-form-item label="员工状态" prop="emplStatusId">
                                    <el-select v-model="form.emplStatusId" placeholder="请选择员工状态">
                                        <el-option
                                           v-for="dict in emplStatusIdOptions"
                                           :key="dict.enumCode"
                                           :label="dict.description"
                                           :value="dict.enumCode"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="24">
                            <el-form-item size="large" align="center">
                                <el-button type="primary" @click="saveForm">保 存</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <el-card class="Empl_register_detail" v-if="detailFlag">
                <div slot="header" class="clearfix">
                    <span>员工基本信息</span>
                    <el-button v-if="detailFlag" style="float: right; padding: 3px 0" type="text" @click="edit">编辑</el-button>
                </div>
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="员工号" prop="partyId">
                                <span>{{ employeeIdFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="姓名" prop="firstName">
                                <span>{{ form.firstName }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="性别" prop="gender">
                                <span>{{ genderFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="部门" prop="deptId">
                                <span>{{ deptIdFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="职位" prop="positionId">
                                <span>{{ positionIdFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="手机号" prop="mobilePhone">
                                <span>{{ form.mobilePhone }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="身份证" prop="cardId">
                                <span>{{ form.cardId }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="公司邮箱" prop="mail">
                                <span>{{ form.mail }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="入职日期" prop="entryDate">
                                <span>{{ form.entryDate }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="上级主管" prop="supervisor">
                                <span>{{ form.supervisor }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="头像" prop="imageData">
                                <span>{{ form.imageData }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="民族" prop="nation">
                                <span>{{ nationFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="出生日期" prop="birthDate">
                                <span>{{ form.birthDate }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="居住地址" prop="residentialAddress">
                                <span>{{ form.residentialAddress }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="学历" prop="education">
                                <span>{{ educationFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="政治面貌" prop="politicStatus">
                                <span>{{ politicStatusFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="个人邮箱" prop="personalEmail">
                                <span>{{ form.personalEmail }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="员工状态" prop="emplStatusId">
                                <span>{{ emplStatusIdFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                </el-form>
            </el-card>
            <!-- 审批组件 -->
            <approve v-if="approveFlag"></approve>
    </div>
</template>

<script>
import LoadPersonSelect from "@/components/LoadPersonSelect";
// person enum api
import { getPersonEnum} from "@/api/ehr/person";
import { addEmpl_register, updateEmpl_register, approvalEmpl_register } from "@/api/ehr/empl_register";
import { updateUserProfile } from "@/api/system/user";

export default {
  components: {LoadPersonSelect},
  props: {
    user: {
      type: Object
    },
    person: {
      type: Object
    },
    form: {
      type: Object
    },
  },
  data() {
    return {
      // 人员字典
            personOptions: [],
            // 员工号业务字典
            employeeIdOptions: [],
            // 性别业务字典
            genderOptions: [],
            // 部门业务字典
            deptIdOptions: [],
            // 职位业务字典
            positionIdOptions: [],
            // 民族业务字典
            nationOptions: [],
            // 学历（最高）业务字典
            educationOptions: [],
            // 政治面貌业务字典
            politicStatusOptions: [],
            // 员工状态业务字典
            emplStatusIdOptions: [],
            // 操作标识,用于区分是新增还是修改
            updateFlag: false,
            // 操作标识,用于区分是详情
            detailFlag: true,
            // 操作标识,用于区分编辑状态
            editFlag: false,
            // 业务申请标识
            applyFlag: false,
            // 业务审批标识
            approveFlag: false,
      rules: {
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
         // 人员字典
        getPersonEnum().then((response) => {
            this.personOptions = response.data;
        });
         // 员工号业务字典
        this.getEntityDicts("person:partyId:firstName").then((response) => {
             this.employeeIdOptions = response.data;
        });
         // 性别业务字典
        this.getEnumDicts("PERSON_GENDER").then((response) => {
            this.genderOptions = response.data;
        });
         // 部门业务字典
        this.getEntityDicts("sysDept:deptId:deptName").then((response) => {
             this.deptIdOptions = response.data;
        });
         // 职位业务字典
        this.getEntityDicts("sysPost:postId:postName").then((response) => {
             this.positionIdOptions = response.data;
        });
         // 民族业务字典
        this.getEnumDicts("NATION").then((response) => {
            this.nationOptions = response.data;
        });
         // 学历（最高）业务字典
        this.getEnumDicts("PERSON_EDUCATION").then((response) => {
            this.educationOptions = response.data;
        });
         // 政治面貌业务字典
        this.getEnumDicts("PERSON_POLITIC").then((response) => {
            this.politicStatusOptions = response.data;
        });
         // 员工状态业务字典
        this.getEnumDicts("EMPL_STATUS").then((response) => {
            this.emplStatusIdOptions = response.data;
        });
  },
  methods: {
        // 人员字典转换
        personFormat(row, column) {
            let val = null;
            this.personOptions.forEach((item, index) => {
                if (row.partyId === item.partyId) {
                val = item.name;
            }
        });
            return val;
        },
        // 审批人字典转换
        approverFormat(row, column) {
            let val = null;
            this.personOptions.forEach((item, index) => {
                if (row.approver === item.partyId) {
                val = item.name;
            }
        });
            return val;
        },
        employeeIdFormat(row, column) {
            let val = null;
            this.employeeIdOptions.forEach((item, index) => {
                if (row.partyId === item.partyId) {
                    val = item.firstName;
                }
            });
            return val;
        },
        genderFormat(row, column) {
            let val = null;
            this.genderOptions.forEach((item, index) => {
                if (row.gender === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },
        deptIdFormat(row, column) {
            let val = null;
            this.deptIdOptions.forEach((item, index) => {
                if (row.deptId === item.deptId) {
                    val = item.deptName;
                }
            });
            return val;
        },
        positionIdFormat(row, column) {
            let val = null;
            this.positionIdOptions.forEach((item, index) => {
                if (row.positionId === item.postId) {
                    val = item.postName;
                }
            });
            return val;
        },
        nationFormat(row, column) {
            let val = null;
            this.nationOptions.forEach((item, index) => {
                if (row.nation === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },
        educationFormat(row, column) {
            let val = null;
            this.educationOptions.forEach((item, index) => {
                if (row.education === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },
        politicStatusFormat(row, column) {
            let val = null;
            this.politicStatusOptions.forEach((item, index) => {
                if (row.politicStatus === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },
        emplStatusIdFormat(row, column) {
            let val = null;
            this.emplStatusIdOptions.forEach((item, index) => {
                if (row.emplStatusId === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },
        /** 保存按钮 */
        saveForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading = true;
                    if (this.form.partyId != null && this.updateFlag) {
                        // updateEmpl_register(this.form).then(response => {
                        //     this.$modal.msgSuccess("修改成功");
                        //     this.open = false;
                        // });
                    } else {
                        // addEmpl_register(this.form).then(response => {
                        //     this.form.partyId = response.data.partyId;
                        //     this.$modal.msgSuccess("新增成功");
                        //     this.open = false;
                        // });
                    }
                    this.loading = false;

                    this.editFlag = false;
                    this.detailFlag = true;
                }
            });
        },

        /** 编辑 */
        edit(){
            this.editFlag = true;
            this.detailFlag = false;
        },        
    // submit() {
    //   this.$refs["form"].validate(valid => {
    //     if (valid) {
    //       updateUserProfile(this.user).then(response => {
    //         this.$modal.msgSuccess("修改成功");
    //       });
    //     }
    //   });
    // },
    // close() {
    //   this.$tab.closePage();
    // }
  }
};
</script>
